<template>
  <div>
    <el-cascader :options="options" :props="defaultProps" :disabled="codeDisable" placeholder="请选择区域" @change="onChange" />
    <el-input v-model="detailAddress" placeholder="请输入详细地址" />
  </div>
</template>

<script>
import { chooseRegion } from '@/api/user'
export default {
  components: {},
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    codeDisable: {
      type: Boolean,
      default: false
    },
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      detailAddress: '',
      address: [],
      options: [],
      defaultProps: {
        value: 'name',
        label: 'name',
        checkStrictly: true
      }
    }
  },
  watch: {
    detailAddress(val) {
      this.$emit('change', `${this.address}${this.detailAddress}`)
    }
  },
  mounted() {
    this.getAddress()
  },
  methods: {
    // 获取行政区划
    getAddress() {
      chooseRegion().then(res => {
        if (res.message === 'success') {
          this.options = res.data
        }
      })
    },
    onChange(e) {
      this.address = e.join('')
      this.$emit('change', `${this.address}${this.detailAddress}`)
    }
  }
}
</script>
<style scoped lang='scss'>
.el-cascader{
  width:100%;
  margin-bottom:10px;
}
</style>
